import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { LoginTitle, LoginWrapper, LoginBox, Input, Button } from './style'
import { login } from './store'
import { Redirect } from 'react-router-dom'
class Login extends PureComponent {
    render() {
        const { loginState } = this.props
        if (!loginState) {
            return (
                <LoginWrapper>
                    <LoginBox>
                        <LoginTitle>登录/注册</LoginTitle>
                        <Input placeholder="账号" ref={(input) => { this.account = input }}></Input>
                        <Input placeholder="密码" type="password" ref={(input) => { this.password = input }}></Input>
                        <Button onClick={() => this.props.login(this.account, this.password)}>登录</Button>
                    </LoginBox>
                </LoginWrapper>
            )
        } else {
            return <Redirect to={'/'} />
        }
    }
}

const mapStateToProps = (state) => ({
    loginState: state.getIn(['login', 'login'])
})
const mapDispatchToProps = (dispatch) => {
    return {
        login(accountElem, passwordElem) {
            dispatch(login(accountElem.value, passwordElem.value))
            // console.log(accountElem.value, passwordElem.value);

        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)